<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  fixed
/><van-skeleton title :row="3" />
<div style="height: 45px;width: 370px;">
    
</div>
    <div>
<van-row>
  <van-col span="6">
    <van-sidebar v-model="active">
  <van-sidebar-item :title="item.cat_name" v-for="item in categoriesApiData"/>
</van-sidebar>
  </van-col>
  <van-col span="18">
    <van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @search="onSearch"
/>
    <div v-for="item in categoriesApiData[active]?.children">
        <h4>{{ item.cat_name }}</h4>
        <router-link :to="{name:'goods',params:{query:item.cat_name}}">
    <van-grid :column-num="3">
  <van-grid-item v-for="items in item.children" :key="value" :icon="items.cat_icon" :text="items.cat_name" />
</van-grid>
</router-link>
</div>
  </van-col>
</van-row>
<!-- <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" /> -->
    </div>
    </van-pull-refresh>
</template>

<script setup>
import router from '@/router';
import { ref } from 'vue';
import { categoriesApi } from '@/api/api';
let categoriesApiData=ref([])
categoriesApi().then(res=>{
    categoriesApiData.value=res.data.message
    console.log(res);
    
})
const active = ref(1);
const onSearch=()=>{
    router.push('/ss')
}
import { showToast } from 'vant';
 const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
    const onSubmit=()=>{
    router.push('/didan')
}
const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>

</style>